<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10 综合练习2</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <h3>你最喜欢哪个游戏?</h3>
        <input type="checkbox" v-model="all" @change="fullClick()">全选<br />
        <!-- 通过循环展示复选框-->
        <span v-for="(item,index) in list"><input type="checkbox" v-model="item.check"
                @change="checkClick()">{{item.name}}</span><br>
        新增其他：<input type="text" v-model="newName"><br>
        <input type="file" @change="load($event)"><button @click="add()">上传</button><br>
        <input type="button" @click="allClick" value="全选">
        <input type="button" @click="allNotClick" value="全不选">
        <input type="button" @click="fasClick" value="反选"><br>
        <span v-for="item in list"><img :src="item.src" style="width: 200px;height: 200px;"
                v-show="item.check==true"></span>
    </div>
</body>

</html>

<script>
    const appConn = Vue.createApp({
        data() {
            return {
                list: [{ name: '王者荣耀', check: false, src: './游戏图标/王者荣耀.png' },
                { name: '火影忍者', check: false, src: './游戏图标/火影忍者.png' },
                { name: '原神', check: false, src: './游戏图标/原神.png' },
                { name: '金铲铲之战', check: false, src: './游戏图标/金铲铲之战.png' },
                ],
                all: false,

            }
        },
        methods: {
            fullClick() {
                if (this.all) {
                    this.list.map(v => {
                        v.check = true
                    })
                }
                else {
                    this.list.map(v => {
                        v.check = false
                    })
                }
            },
            checkClick() {
                let flag = this.list.length//获得数组的长度，并赋值给变量flag
                this.list.map(v => {
                    if (!v.check) flag--  //遍历数组，如果遇到check是false的，就flag减1
                }
                )
                if (flag < this.list.length) //如果flag的值小于数组的长度，说明有对象没有被选中
                    this.all = false
                else
                    this.all = true
            },
            load(e){
                let file = e.target.files
                let img = new FileReader()
                img.readAsDataURL(file[0])
                img.onload = ({target})=>{
                    alert("上传成功")
                    this.fileSrc = target.result
                }
            },
            add(){
                this.list.push({name:this.newName,check:false,src:this.fileSrc})
            },
            allClick(){
                this.list.map(v => {
                        v.check = true
                    })
            },
            allNotClick(){
                this.list.map(v => {
                        v.check = false
                    })
            },
            fasClick(){
                this.list.map(v => {
                        v.check =! v.check
                    })
            }
        }
    }).mount("#app")
</script>